<template>
	<div class="strategy-detail-view">
		<mt-header fixed title="策略详情" class="mt-header">
			<router-link to="/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
		</mt-header>
		
		<div class="info">
			<div class="info-header">
				<div class="info-header-left">
					<figure>
                        <img :src="strategyDetail.info.pic" alt="">
                    </figure>
                    <h4>{{strategyDetail.info.name}}</h4>
				</div>
    				<router-link :to="{path: '/follow-strategy/'+strategyDetail.info.id+'/'+strategyDetail.info.name }" class="info-header-right">跟随策略</router-link>
			</div>
			<div class="info-body">
				<div class="info-body-line">
					<div>
						<p>{{strategyDetail.info.name || '&nbsp;'}}</p>
						<span>策略名称</span>
					</div>
					<div>
						<p>{{strategyDetail.info.silu || '其他'}}</p>
						<span>策略思路</span>
					</div>
					<div>
						<p>{{strategyDetail.info.pinzhong || '&nbsp;'}}</p>
						<span>主要品种</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{strategyDetail.info.yueshouyi || '0'}}</p>
						<span>平均每月收益</span>
					</div>
					<div>
						<p>{{strategyDetail.info.lishizuidahuiche || '其他'}}</p>
						<span>历史最大回撤</span>
					</div>
					<div>
						<p>{{strategyDetail.info.fengxianbaochoubi}}</p>
						<span>风险报酬比</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{strategyDetail.info.zongtizhisun || '0'}}</p>
						<span>总体止损</span>
					</div>
					<div>
						<p>{{strategyDetail.info.rineizhisun || '其他'}}</p>
						<span>日内止损</span>
					</div>
					<div>
						<p>{{strategyDetail.info.jiaoyipinlv}}</p>
						<span>交易频率</span>
					</div>
				</div>
				<div class="info-body-line">
					<div>
						<p>{{strategyDetail.info.ranking || '0'}}</p>
						<span>推荐指数</span>
					</div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>
		<div class="spacing"></div>
		<div class="detail">
			<p><span>策略详情：</span>{{strategyDetail.info.celuejieshao}}</p>
		</div>
		<div class="spacing"></div>
		<h3 class="title charttitle">月收益分析</h3>
		<my-chart class="chart"  :data="strategyDetail.monthlymoeny" top="15px" right="15px" bottom="60px" left="25px" type="bar"></my-chart>
		<h3 class="title">当前持仓</h3>
		<table class="store">
			<thead>
				<tr>
					<td>单号</td>
					<td>品种</td>
					<td>类别</td>
					<td>手数</td>
					<td>开仓价格</td>
					<td>止损</td>
					<td>止盈</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in strategyDetail.Currentposition">
					<td>{{item.ticket}}</td>
					<td>{{item.symbol}}</td>
					<td>{{item.cmd? '卖': '买'}}</td>
					<td>{{item.volume}}</td>
					<td>{{item.price}}</td>
					<td>{{ (+item.stoploss).toFixed(2) }}</td>
					<td>{{ (+item.takeprofit).toFixed(2) }}</td>
				</tr>
			</tbody>
		</table>

		<my-footer></my-footer>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import MyChart from '@/components/mychart'
	export default {
		name: 'StrategyDetailView',
		components: {MyChart},
		data () {
			return {

			}
		},
		computed: {
            ...mapState({
                strategyDetail: state => state.strategy.strategyDetail
            })
        },
		methods: {
			getStrategyDetail() {
				this.$store.dispatch({
					type: 'getStrategyDetail',
					id: this.$route.params.id
				})
			}
		},
		created () {
			this.getStrategyDetail()
		}
	}
</script>

<style scoped>
	.strategy-detail-view {
		margin-bottom: 60px;
		padding: 40px 15px 15px 15px;
		background: #fff;
	}
	.mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
	.spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    .info {
    	padding-bottom: 12px;
    }
	.info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .info-header-left {
        display: flex;
        align-items: center;
    }
    .info-header figure {
        margin: 0 15px 0 0;
        width: 50px;
        height: 50px;
        border: 1px solid #ddd;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .info-header figure img {
        width: 100%;
        height: 100%;
    }
    .info-header h4 {
        margin: 0;
        font-size: 14px;
    }
    .info-header a {
        width: 80px;
        height: 25px;
        line-height: 27px;
        border-radius: 5px;
        background: #FFF54C;
        border:1px solid #eee;
        letter-spacing: 2px;
        text-decoration: none;
        color: #666;
        font-size: 12px;
        text-align: center;
    }

	.info-body-line {
        display: flex;
        padding: 3px 0;
    }
    .info-body-line > div {
    	position: relative;
        flex: 1;

        display: flex;
        flex-direction: column;
    }
    .info-body-line:not(:last-child) > div:not(:first-child)::before {
		content: '';
		position: absolute;
		width: 1px; height: 20px;
		left: 0; top: 13px;
		background: #eee;
    }
    .info-body-line:last-child > div:nth-child(2)::before {
		content: '';
		position: absolute;
		width: 1px; height: 20px;
		left: 0; top: 13px;
		background: #eee;
    }
    .info-body-line p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        color: #555;
        line-height: 16px;
    }
    .info-body-line span {
        font-size: 12px;
        color: #999;
    }

    .detail p {
    	font-size: 13px;
    	line-height: 1.7;
    	color: #333;
    	text-align: left;
    }
    .detail p span {
    	color: #666;
    	font-weight: bold;
    }
	.chart {
		padding-top: 15px;
		height: 300px;
	}
	.store  {
		width: 100%;
		border: 1px solid #ccc;
	}
	/*.store  tr{
		display: flex;
	}
	.store  tr > td {
		flex: 1;
	}*/
	.store tr {
		box-shadow: 0 -1px #ccc inset
	}
	.store td {
		font-size: 12px;
		padding: 0;
		line-height: 25px;
	}
	h3.title {
		font-size: 16px;
		margin-bottom: 25px;
	}
	h3.title.charttitle {
		margin-bottom: 0
	}
</style>